<!--
 * @Descripttion: 售后管理（中心）
 * @version:
 * @Author: 常帅
 * @Date: 2020-09-30 14:43
 * @LastEditors: 穆宏宇
 * @LastEditTime: 2020-11-24 08:51:47
-->
<template>
  <div class="afterSale">
    <el-row :gutter="10">
      <el-card class="box-card">
          <!-- 搜索 -->
          <e-control
            :search-form-options="formOptions"
            :btns="btns"
            @on-search="onSearch"
          ></e-control>
          <el-button @click="approveRegEvent()" type="primary" size="small">审核通过</el-button>
          <el-button @click="refuseRegEvent()" type="danger" size="small">审核不通过</el-button>
          <el-button @click="queryDtailEvent()" type="info" size="small">查看</el-button>
          <!-- 表格 -->
          <el-table :data="tableData" border style="width: 100%"
          highlight-current-row
          @current-change="handleCurrentRowChange"
          :height="maxHeightNow">
            <el-table-column prop="id" v-if="false" label="1"></el-table-column>
             <el-table-column prop="centerAuditStatus" label="退换货状态" v-if="false"></el-table-column>
            <el-table-column prop="orderNo" label="订单号" width="280"></el-table-column>
            <el-table-column prop="afterSaleId" label="售后订单号" width="280"></el-table-column>
            <el-table-column prop="supplierName" label="供应商名称" width="280"></el-table-column>
            <el-table-column prop="goodsName" label="商品名称" width="200"></el-table-column>
            <el-table-column prop="skuCode" label="sku"></el-table-column>
            <el-table-column prop="price" label="未税单价（元）" width="100"></el-table-column>
            <el-table-column prop="excludeTaxPrice" label="含税单价（元）" width="100"></el-table-column>
            <el-table-column prop="afterSaleNum" label="数量"></el-table-column>
            <el-table-column prop="fixedPrice" label="含税总价" width="100"></el-table-column>
            <el-table-column prop="sumExcludeTaxPrice" label="未税总价" width="100"></el-table-column>
            <el-table-column prop="typeNo" label="型号"></el-table-column>
            <el-table-column prop="name" label="采购人"></el-table-column>
            <el-table-column prop="centerAuditStatusValue" label="退换货状态" width="100"></el-table-column>
            <el-table-column prop="afterSaleReason" label="退换货原因" width="100"></el-table-column>
            <el-table-column prop="serviceType" label="类型"></el-table-column>
            <el-table-column prop="mobile" label="采购人电话" width="110"></el-table-column>
            <el-table-column prop="buyNum" label="采购数量"></el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalPage"
          ></el-pagination>
      </el-card>
      <!-- </el-col> -->
    </el-row>

<el-dialog :title="dialogTitle" :visible.sync="dialogVisible"
           :close-on-click-modal="false"
           :close-on-press-escape="false">
  <el-form
        :label-position="'right'"
        :rules="rules"
        label-width="120px"
        :model="form"
        label-suffix=":"
        ref="form">
    <el-row>
      <el-col :span="20">
        <el-form-item label="退回理由" prop="auditRemark">
          <el-input type="textarea"
                    show-word-limit
                    maxlength="1000"
          :rows="4" v-model="form.auditRemark"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <!-- todo 显示供应商信息 -->
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="closeRefundDialog">关 闭</el-button>
    <el-button type="primary" @click="handleSubmit">保 存</el-button>
  </div>
</el-dialog>

<el-dialog :title="dialogTitle" :visible.sync="detailDialogVisible"
           :close-on-click-modal="false"
           :close-on-press-escape="false">
  <el-form
        :label-position="'right'"
        label-width="120px"
        :model="detail"
        label-suffix=":"
        disabled='true'
        ref="detail">
    <el-row>
      <el-col :span="12">
        <el-form-item label="商品名称" prop="goodsName">
          <el-input disabled=true v-model="detail.goodsName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="订单编号" prop="orderNo">
          <el-input v-model="detail.orderNo"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="下单时间" prop="orderTime">
          <el-input v-model="detail.orderTime"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="采购人" prop="name">
          <el-input v-model="detail.name"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="SKU" prop="skuCode">
          <el-input v-model="detail.skuCode"></el-input>
        </el-form-item>
      </el-col>
       <el-col :span="12">
        <el-form-item label="单价" prop="price">
          <el-input v-model="detail.price"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="数量" prop="afterSaleNum">
          <el-input v-model="detail.afterSaleNum"></el-input>
        </el-form-item>
      </el-col>
       <el-col :span="12">
        <el-form-item label="总价" prop="fixedPrice">
          <el-input v-model="detail.fixedPrice"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="退换货状态" prop="centerAuditStatus">
          <el-input v-model="detail.centerAuditStatusValue"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="detail.centerAuditStatus === '3' || detail.centerAuditStatus === '2'">
        <el-form-item label="退回原因" prop="auditRemark">
          <el-input v-model="detail.auditRemark"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="申请时间" prop="submitTime">
          <el-input v-model="detail.submitTime"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="回复时间" prop="auditTime">
          <el-input v-model="detail.auditTime"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="退换货原因" prop="reasonDescription">
          <el-input type="textarea" :rows="4" v-model="detail.reasonDescription" maxlength="1000" show-word-limit></el-input>
        </el-form-item>
      </el-col>
      <p v-for="(item, index) in picList" :key="index">
        <el-col :span="12">
        <el-form-item
          :label="'附件图片' + (index+1)"
          prop="pic">
          <el-image :src="item" style="width:80px;height:80px" :preview-src-list="picList" ></el-image>
        </el-form-item>
      </el-col>
      </p>


    </el-row>
    <!-- todo 显示供应商信息 -->
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="detailDialogVisible = false">关 闭</el-button>
  </div>
</el-dialog>

  </div>
</template>

<script>
import eControl from "@/components/e-control";
import { formOptions, btns } from "./control";
// import editFormOptions from "./form";
import { getAfterSaleList, getpurchaserOrg, approveReg, refuseReg, centerAudit } from "@/api/admin.api";
import {getFileUrl,queryFileList} from  "@/api/common.api";
export default {
  name: "afterSale",
  components: {
    eControl,
  },
  data() {
    return {
      picList : [],
      // 用户类型 0 采购人；1 供应商
      userType: '0',
      formOptions,
      btns,
      // columns,
      // editFormOptions,
      dialogRoleVisible: false,
      editDialogTitle: "新增用户",
      editDialogShow: false,
      setRole: "",
      // 编辑框表单数据
      dialogFormCurrent: {

      },

      defaultProps: {
        children: "children",
        label: "label",
      },
      form: {
        auditRemark: ''
      },
      detail:{},
      // 显示打回审核弹窗
      dialogVisible: false,
      // 详情展示弹窗
      detailDialogVisible: false,
      // 表格数据
      tableData: [],
      // 弹窗标题
      dialogTitle: '',
      currentPage: 1,
      pageSize: 10,
      totalPage: 0,
      currentRow: null,
      rules: {
        auditRemark: [
          { required: true, trigger: 'blur',message: '退回理由不能为空'}
        ]
      },
      // 搜索内容
      searchData:{}
    };
  },
  watch: {},
  computed: {
    // 表单实例
    dialogForm() {
      return this.$refs.dialogForm;
    },
    // 表格高度
    maxHeightNow () {
      const height = window.innerHeight
      return height -  290
    }
  },
  created() {
    this.init();
    // this.getpurchaserOrgEvent();
  },
  mounted() {},
  methods: {
    closeRefundDialog(){
        this.dialogVisible = false;
    },
    // 初始化
    init(data={}){
      // todo 清空条件
      this.currentPage = 1;
      this.pageSize = 10;
      // if (this.userType=='1') {
      //   // todo 获取供应商列表
      // }else{
        this.getAfterSaleListEvent(data);
      // }
    },
    // 切换tab
    tabClick(tab){
      this.init()
      this.getpurchaserOrgEvent()
    },
    // 查询已注册采购人|供应商
    getAfterSaleListEvent(data){
      let params = {
        size: this.pageSize,
        current: this.currentPage,
        goodsName: data.goodsName,
        name: data.name,
        submitTimeBegin: data.submitTimeBegin,
        submitTimeEnd: data.submitTimeEnd,
        orderNo: data.orderNo,
        sku: data.sku,
        typeNo:  data.typeNo,
        centerAuditStatus: data.centerAuditStatus
      }
      getAfterSaleList(params).then(res=>{
        this.tableData = res.records;
        this.totalPage = res.total;
      })
    },
    // 查询采购人|供应商组织
    getpurchaserOrgEvent(){
      getpurchaserOrg(this.userType).then(res=>{
        this.formOptions[2].props.options = res
        // 供应商
        if(this.userType=='1'){
          this.formOptions[2].props.props.label = 'orgNameZh'
        }else{
          this.formOptions[2].props.props.label = 'name'
        }
      })
    },
    // 审核通过
    approveRegEvent(){
      if(this.currentRow == null){
        this.$message({
            message: '请求选择要审核的记录',
            type: 'warning'
          })
         return false;
      }

      if(this.currentRow.centerAuditStatus!=0){
        this.$message({
            message: '只能审核待审核记录',
            type: 'error'
          })
         return false;
      }
      this.$confirm('确定通过此申请吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let updateParam = {
          afterSaleId: this.currentRow.id,
          centerAuditStatus: 1
        }
        centerAudit(updateParam).then(res=>{
          this.$message({
            message: '执行成功',
            type: 'success'
          })
          this.init();
        }).catch(err=>{
          console.log(err);
           this.$message({
            message: '审核失败！',
            type: 'error'
          })
        })
      })
    },
    // 审核拒绝
    refuseRegEvent(){
      if(this.currentRow == null){
        this.$message({
            message: '请求选择要审核的记录',
            type: 'warning'
          })
         return false;
      }
       if(this.currentRow.centerAuditStatus!=0){
        this.$message({
            message: '只能审核待审核记录',
            type: 'error'
          })
         return false;
      }
      this.form.auditRemark = '';
      this.dialogTitle = '退回信息';
      this.dialogVisible = true;
    },
    queryDtailEvent(){
      this.picList.length = 0;
      if(this.currentRow == null){
          this.$message({
            message: '请选择要查看的记录',
            type: 'warning'
          })
      }
      this.detail =  this.currentRow;
      this.detailDialogVisible = true;
      // 查询图片地址集合
      var detailParam = {
        sourceIds : this.currentRow.attactments
      }
      queryFileList(5,detailParam).then(res=>{
        for(var i=0;i<res.length;i++){
          this.picList.push(res[i].url);
        }
        this.detail = this.currentRow;
      this.detailDialogVisible = true;
      this.dialogTitle = "查看退换货信息";
      }).catch(err=>{
        this.picList = [];
        this.detail = this.currentRow;
      this.detailDialogVisible = true;
      this.dialogTitle = "查看退换货信息";
      })

    },
    // 确定
    handleSubmit(){
      this.$refs.form.validate((valid) => {
        if (valid) {
        let updateParam = {
          afterSaleId: this.currentRow.id,
          centerAuditStatus: 2,
          auditRemark: this.form.auditRemark
        }
        centerAudit(updateParam).then(res=>{
          this.$alert('退回成功', '提示', {
              confirmButtonText: '确定',
              type: 'success',
              callback: action => {
                this.dialogVisible = false;
                this.init();
              }
            })
        })
        }
      })
    },
    handleOther(data) {
      console.log(data);
    },
    handleNodeClick(data) {
      console.log(data);
    },
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
    },
    handleRoleClose(done) {
      // this.dialogRoleVisible = false
      done();
    },
    // 搜索
    onSearch(data) {
      this.searchData = data
      this.init(data)
    },
    // 新增
    onInsert() {
      this.editDialogTitle = "新增用户";
      this.editDialogShow = true;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAfterSaleListEvent(this.searchData);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getAfterSaleListEvent(this.searchData);
    },
     handleCurrentRowChange(val) {
      console.log(`当前行: ${val}`);
      this.currentRow = val;
    },
    /**
     * @functionName closeDialog
     * @description 关闭编辑框
     * @author 张航
     * @date 2020-09-08 14:27:02
     * @version V1.0.0
     */
    closeDialog() {
      this.editDialogType = 0;
      this.editDialogShow = false;
    },
    /**
     * @functionName cancelDialogData
     * @description 取消保存弹框数据
     * @author 张航
     * @date 2020-09-08 18:17:11
     * @version V1.0.0
     */
    cancelDialogDataHandle() {
      this.dialogForm.handleRefresh();
      this.closeDialog();
    },
    /**
     * @functionName saveDialogData
     * @description 保存弹框数据
     * @author 张航
     * @date 2020-09-08 18:15:14
     * @version V1.0.0
     */
    saveDialogDataHandle() {
      const { insert: { url, type = "GET" },} = this.interFace;
      console.log(this.dialogForm.formData);
      this.interFaceEvent(url, this.dialogForm.formData, type).then((res) => {
        // console.log(res);
        this.dialogForm.handleRefresh();
        this.closeDialog();
        this.$message({
          message: "保存成功",
          type: "success",
        });
      });
    },
    /**
     * @functionName interFaceEvent
     * @param {String|} url 请求地址
     * @param {Object} data 请求参数
     * @param {String} type 请求类型，默认为GET
     * @return {Promise} 返回结果
     * @description 接口访问
     * @author 张航
     * @date 2020-09-14 16:14:51
     * @version V1.0.0
     */
    interFaceEvent(url, data, type = "GET") {
      let _url = url;
      const _type = type.toLowerCase();
      if (_type === "get") {
        _url = _url + this.$tools.urlParam(data);
      }
      return this.$api[_type](_url, data);
    },
  },
};
</script>

<style scoped lang="scss">
.box-card {
  margin: 4px;


  .el-table {
    margin-top: 20px;
  }
  .el-pagination {
    text-align: right;
  }
}
.abc-header {
  color: #0000ff;
}
.abc {
  font-weight: bold;
  color: #e53939;
}
</style>

<style lang="scss">
  .afterSale  {
    padding: 20px;
    background: white;
    .form-operation {
      text-align: right;
      .el-form-item {
        margin-right: 0;
      }
    }
    .el-pagination {
      padding: 20px;
      text-align: right;
    }
    &-tool {
      text-align: right;
      padding-bottom: 20px;
    }
  }
  .current-row{
	  cursor: pointer;
  }
.el-table--enable-row-hover .el-table__body tr:hover > td{
	background: #ffeded;
	cursor: pointer;
}
.current-row td{
	background: #ffeded;
	cursor: pointer;
}
</style>
